<template>
  <div>
    <el-upload
      ref="upload"
      action="action"
      :on-change="beforeUpload"
      :auto-upload="false"
      :data="filepostdata"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      :on-remove="onRemove"
      :file-list="fileList"
      :multiple="true"
      drag
    >
      <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
    </el-upload>
    <div class="upload-btn">
      <el-button
        type="success"
        @click="upload"
        :loading="loading"
        size="mini"
        v-if="showupload"
        >上传附件</el-button
      >
    </div>
  </div>
</template>

<script>
const formData = new FormData();
import * as dd from "dingtalk-jsapi";

export default {
  data() {
    return {
      showupload: false,
      loading: false,
      delete_index: "",
      isload: true,
      filepostdata: { userid: "", code: [] },
      fileList: [],
      fileinfo: [],
    };
  },
  methods: {
    cleanfilelist() {
      this.$refs.upload.clearFiles();
    },
    
    beforeUpload(file) {
      formData.append("files", file.raw);
      this.filepostdata.userid = sessionStorage.getItem("userid");
      this.getdingtalicode();
      this.showupload = true;
    },

    onRemove(file) {
      for (let i = 0, len = this.fileinfo.length; i < len; i++) {
        if (this.fileinfo[i].file_id == file.response.file_id) {
          this.delete_index = i;
        }
      }

      this.fileinfo.splice(this.delete_index, 1);
    },

    handlePreview(file) {
      window.open(file.response.url, "_blank");
      console.log(file);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    async upload() {
      this.loading = true;
      console.log("666")
      
      if (this.filepostdata.code!=null) {
      formData.append("code", this.filepostdata.code);
      formData.append("userid", sessionStorage.getItem("userid"));
      this.$axios
        .post("api/dingtalkfileupload", formData)
        .then((response) => {
          console.log(response);
          if (response.data.code == 200) {
            this.fileinfo = response.data.data.fileinfo;
            this.loading = false;
            this.showupload = false;
            this.$notify({
              title: "用户信息",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
          } else {
            this.loading = false;
            this.$notify({
              title: "用户信息",
              message: response.data.msg,
              type: "success",
              duration: 1500,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
        
      } else {
        setTimeout(() => {
          console.log("wait....")
          this.upload();
        }, 100);
        
      }
    
    },

    getdingtalicode() {
      const that = this;
      return new Promise((resolve) => {
        dd.ready(function () {
          dd.runtime.permission.requestAuthCode({
            corpId: "ding5b2aa85601c5363fffe93478753d9884", // 企业id
            onSuccess: async function (info) {
              const tempCode = info.code;
              that.filepostdata.code.push(tempCode);
              that.filepostdata.userid = sessionStorage.getItem("userid");
            },
            onFail: function (err) {
              that.toast({
                message: "获取code失败，请退出重试",
              });
            },
          });
        });
      });
    },
  },
};
</script>

<style>
/* .el-upload-list__item {
  font-size: 20px;
} */
.el-upload {
  display: block;
}
.el-upload-dragger {
  width: 100%;
  height: 40px;
}
</style>